<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>显示有哪些学生迟到</title>
		<!--导入vue这个包-->
		<script type="text/javascript" src="js/vue.js"></script>
		<script type="text/javascript" src="js/abc.js"></script>
		<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
		
		<link href="css/css.css" rel="stylesheet" />
		
	</head>
	<body>
		<table id="studentList">
			
			<tr>
				<td colspan="6">
					<input type="button" v-on:click="deteleData" value="删除" />
					<input type="button"  value="修改" />
					<input type="button"  value="新增" />
				</td>
			</tr>
			
			<!--表头是固定的-->
			<tr>
				<td><input id="quan" type="checkbox" v-on:click="selectAll($event)" /></td>
				<td>班级名称</td>
				<td>学生姓名</td>
				<td>考勤日期</td>
				<td>考勤类型</td>
				<td>手机号码</td>
			</tr>
			
			
			<tr v-for="student in studentList">
				<td><input type="checkbox" class="checkItem" v-bind:id="student.id" :value="student.id" v-model="checkData" /></td>
				<td>{{student.className}}</td>
				<td>{{student.studentName}}</td>
				<td>{{student.delayDate}}</td>
				<td>{{student.typeName}}</td>
				<td>{{student.phone}}</td>
			</tr>
			
			<tr>
				<td colspan="6">
					<!-- v-on:click="xx" -->
					<input type="button"  value="<<" />
					<input type="button" v-on:click="prePage"   value="上一页" />
					<input type="button" v-on:click="nextPage"  value="下一页" />
					<input type="button"  value=">>" />
					
					共 
						<span style="color: green;">{{totalPage}}</span>
					页  到第
					<input id="hhh"  v-model="begin" type="text" />
					页
					<input type="button"  value="确定" />
				</td>
			</tr>
			
			
		</table>
	</body>
	
	<script>
	
		
		// 如何给1个元素绑定1个事件
		
		
		// 3 把这些数据和页面绑定
	
	</script>
</html>
